import { styled } from "styled-components";

export const PreviewVideoWarpper = styled.div`
display: flex;
height:640px;
width: 100%;

.preview-left{
    width: 240px;
    height: 100%;
    overflow: hidden;
    .list-warpper{
        height: 100%;
        overflow-y: scroll;
        .item-container{
            color: #96AFD5;
            cursor: pointer;
            padding:  4px;
            display: flex;
            align-items: center;
        }
        .item-online-state{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .item-content{
            ${props => props.theme.mixin.ellipsisLine1}
        }
        &::-webkit-scrollbar {
            width: 6px;
            display: inline-block;
        }
        &::-webkit-scrollbar-thumb {
            display: inline-block;
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            opacity: 0.3;
            background: #909399
        }
        &::-webkit-scrollbar-track {
            display: inline-block;
            border-radius: 0;
        }
    }
}
.preview-right{
    width: calc(100% - 240px) !important;
    height: 100% !important;
}
`